﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href="/assets/module/opTable/opTable.css" rel="stylesheet" />
</head>
<body>
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form toolbar">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">订阅主题:</label>
                                    <div class="layui-input-inline">
                                        <input name="ThemeName" class="layui-input" placeholder="输入名称" />
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    &nbsp;&emsp;
                                    <button class="layui-btn icon-btn" lay-filter="TbSearch" lay-submit>
                                        <i class="layui-icon">&#xe615;</i>搜索
                                    </button>
                                </div>
                            </div>
                        </form>
                        <table id="gridTable" lay-filter="gridTable"></table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form toolbar">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">订阅主题:</label>
                                    <div class="layui-input-inline">
                                        <input id="ThemeName" class="layui-input layui-disabled" readonly placeholder="左侧选择" />
                                    </div>
                                </div>
                            </div>
                        </form>
                        <table id="gridTable2" lay-filter="gridTable2"></table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <pre class="layui-code" id="msgcode"  style="height:595px;overflow:auto;">

                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 表格操作列 -->
    <script type="text/html" id="toolbar">
        <a id="btnAdd" class="layui-btn layui-btn-sm icon-btn" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</a>
        <a id="btnEdit" class="layui-btn layui-btn-warm layui-btn-sm icon-btn" lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
    </script>
    <script type="text/html" id="TbBar">
        <a class="layui-btn layui-btn-xs" lay-event="detail">消息</a>
    </script>
    <script type="text/html" id="TbBar2">
        <a class="layui-btn layui-btn-xs" lay-event="detail">内容</a>
    </script>

    <!-- js部分 -->
    <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/libs/layui/layui.js"></script>
    <script src="/assets/js/utils.js"></script>
    <script src="/assets/js/main.js"></script>
    <script>
        var table;
        layui.use(['layer', 'form', 'table', 'util', 'admin', 'setter'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            table = layui.table;
            var util = layui.util;
            var admin = layui.admin;
            var setter = layui.setter;

            layuiTableSet(table, setter);

            /* 渲染表格 */
            var insTb = table.render({
                elem: '#gridTable',
                url: setter.baseServer() + '/SystemManage/MqttTheme/GetPageListJson',
                page: true,
                height: 600,
                toolbar: "#toolbar",
                cols: [[
                    { type: 'checkbox' },
                    { type: 'numbers' },
                    { field: 'ThemeName', title: '订阅主题', sort: true },
                    { title: '操作', toolbar: '#TbBar', align: 'center', width: 80 }
                ]]
            });

            /* 表格搜索 */
            form.on('submit(TbSearch)', function (data) {
                insTb.reload({ where: data.field, page: { curr: 1 } });
                return false;
            });

            /* 表格头工具栏点击事件 */
            table.on('toolbar(gridTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel();
                } else if (obj.event === 'edit') { // 修改
                    var checkRows = table.checkStatus('gridTable');
                    if (checkRows.data.length === 0 || checkRows.data.length > 1) {
                        layer.msg('请选择且只选择一条数据', { icon: 2 });
                        return;
                    }
                    showEditModel(checkRows.data[0]);
                } else if (obj.event === 'del') { // 删除
                    var checkRows = table.checkStatus('gridTable');
                    if (checkRows.data.length === 0) {
                        layer.msg('请选择要删除的数据', { icon: 2 });
                        return;
                    }
                    var ids = checkRows.data.map(function (d) {
                        return d.Id;
                    });
                    doDel(ids);
                }
            });

            /* 表格工具条点击事件 */
            table.on('tool(gridTable)', function (obj) {
                if (obj.event === 'detail') { // 详情
                    showDetail(obj.data.ThemeName);
                }
            });

            /* 显示表单弹窗 */
            function showEditModel(mData) {
                var id = "";
                if (mData != undefined && mData != null) { id = mData.Id; }
                admin.open({
                    type: 2,
                    area: ['500px', '333px'],
                    title: (mData ? '修改' : '添加'),
                    content: 'mqttThemeForm.html?id=' + id,
                });
            }

            var insTb2 = table.render({
                elem: '#gridTable2',
                data: [],
                page: true,
                height: 600,
                toolbar: true,
                cols: [[
                    { type: 'checkbox' },
                    { type: 'numbers' },
                    { field: 'Time', title: '消息时间', sort: true },
                    { title: '操作', toolbar: '#TbBar2', align: 'center', width: 80 }
                ]]
            });

            /* 表格工具条点击事件 */
            table.on('tool(gridTable2)', function (obj) {
                if (obj.event === 'detail') { // 详情
                    showDetail2(obj.data.Msg);
                }
            });

            function showDetail(themeName) {
                $("#ThemeName").val(themeName);
                insTb2.reload({
                    url: setter.baseServer() + '/SystemManage/MqttTheme/GetMsgPageListJson',
                    where: { ThemeName: themeName },
                });
            }

            function showDetail2(msg) {
                admin.showLoading('#msgcode', 3, '.8');
                setTimeout(function () {
                    admin.removeLoading('#msgcode');
                    $("#msgcode").html(msg);
                    layui.code();
                }, 666);
            }
        });
    </script>
</body>
</html>